<template>
  <div class="table-wrapper">
    <a-table bordered :dataSource="tableData"  :columns="columns" :pagination='false' :scroll="{ x:'max-content',y:480 }" data-row-key="key">
      <!-- :components="draggerComponents"  -->
      <span slot="customTitle"><a-checkbox :checked="checkAll" @change="onCheckAllChange" /></span>
      <template v-for="item in columns" :slot="item.dataIndex" slot-scope="text, record, index">
        <!-- 复选框 -->
        <a-checkbox :key="item.dataIndex" v-if="item.dataIndex=='fx'" :checked="record.checked" @change="onChange(index,record.materIdSpan)"/>
        <!-- 可编辑表格input输入框 -->
        <div v-if="item.isInput" :key="item.dataIndex">
          <a-input v-if="record.editable && !item.types" v-model="record[item.dataIndex]" :class="record[item.dataIndex+'Error'] ? 'red' : ''" @input="record[item.dataIndex] ? record[item.dataIndex+'Error'] = false : (item.isRequire?record[item.dataIndex+'Error'] = true : '')" allowClear></a-input>
          <a-input-number v-else-if="record.editable && item.types=='number'" v-model="record[item.dataIndex]" :class="record[item.dataIndex+'Error'] ? 'red' : ''" @change="record[item.dataIndex] ? record[item.dataIndex+'Error'] = false : (item.isRequire?record[item.dataIndex+'Error'] = true : '')" allowClear style="width:100%"/>
          <a-date-picker v-else-if="record.editable && item.types=='date'" v-model="record[item.dataIndex]" :class="record[item.dataIndex+'Error'] ? 'red' : ''" valueFormat="YYYY/MM/DD" @change="record[item.dataIndex] ? record[item.dataIndex+'Error'] = false : (item.isRequire?record[item.dataIndex+'Error'] = true : '')" allowClear style="width:100%"/>
          <a-switch v-else-if="record.editable && item.types=='switch'" checked-children="是" un-checked-children="否" :checked="record[item.dataIndex]" @change="record[item.dataIndex] = !record[item.dataIndex]" />
          <span v-else>{{text}}</span>
        </div>
        <!-- 上传附件 -->
        <div v-if="item.dataIndex=='yffj'" :key="item.dataIndex">
          <a-upload action="#" :fileList="record.yffj" @change="handleFileChange($event,index)">
            <a v-if="!record.yffj || !record.yffj.length">上传附件</a>
          </a-upload>
        </div>
        <!-- 操作列 -->
        <div :key="item.dataIndex"  v-if="item.dataIndex=='operation'" class='editable-row-operations'>
          <span v-if="record.editable">
            <a @click="() => save(index)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm title='Sure to cancel?' v-if="record.materId" @confirm="() => cancel(index)">
              <a>取消</a>
              <a-divider type="vertical" />
            </a-popconfirm>
          </span>
          <span v-else>
            <a @click="() => edit(index)">编辑</a>
            <a-divider type="vertical" />
          </span>
          <a-popconfirm v-if="tableData.length" title="Sure to delete?" @confirm="() => onDelete(index,record.materIdSpan)">
            <span>
              <a href="javascript:;">删除</a>
            </span>
          </a-popconfirm>
        </div>
      </template>
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px">
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`请输入${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)">
          确定
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
          重置
        </a-button>
      </div>
      <a-icon
        slot="filterIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <template slot="customRender" slot-scope="text, record, index, column">
        <a-input v-if="record.editable" v-model="record[column.dataIndex]" :class="record[column.dataIndex+'Error'] ? 'red' : ''" @input="record[column.dataIndex] ? record[column.dataIndex+'Error'] = false : (column.isRequire?record[column.dataIndex+'Error'] = true : '')" allowClear></a-input>
        <span v-else>{{text}}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
// import { draggerTable } from '@/mixins/draggerTable';
export default {
  // mixins: [draggerTable],
  props:{
    columns:{
      type: Array,
      default: ()=>{return []}
    },
    dataSource:{
      type: Array,
      default: ()=>{return []}
    },
    flag:{
      type:Number,
      default: 0
    },
  },
  data(){
    return{
      isCheckAll:true,
      checkAll:false,
      selectedRowKeys:[],
      tableData:[],
      searchText:'',
      searchedColumn:'',
    }
  },
  watch:{
    dataSource(v1){
      this.tableData = v1
    },
  },
  methods:{
    //上传文件
    handleFileChange(info,index){
      let fileList = [...info.fileList];
      if(fileList.length){
        fileList = fileList.slice(-2);
        fileList = fileList.map(file => {
          if (file.response) {
            file.url = file.response.url;
          }
          return file;
        });
        this.$set(this.tableData[index],'yffj',fileList)
      }else{
        this.$set(this.tableData[index],'yffj',[])
      }
    },
    //复选框
    onChange(index,materIdSpan) {
      for(let i=0;i<materIdSpan;i++){
        this.tableData[index+i].checked = !this.tableData[index+i].checked;
      }
      let j = 1;
      this.tableData.map(item=>{
        if(!item.checked){
          j = 0;
        }
      })
      j==1 ? this.checkAll = true : this.checkAll = false;
    },
    //复选框
    onCheckAllChange() {
      if(this.isCheckAll){
        this.checkAll = !this.checkAll;
      }else{
        this.checkAll = false;
      }
      if(this.checkAll){
        this.tableData.map(item=>{
          item.checked = true;
        })
      }else{
        this.tableData.map(item=>{
          item.checked = false;
        })
      }
      this.isCheckAll = true;
    },
    // 删除
    onDelete(key,materIdSpan) {
      if(materIdSpan){
        for(let i=0;i<materIdSpan;i++){
          this.tableData.splice(key,1)
        }
      }else{
        this.tableData.splice(key,1)
      }
    },
    // 点击编辑
    edit(key) {
      let newData = [...this.tableData];
      let target = newData.filter((item,index) => key === index)[0];
      this.dataRowCopy = this.deepClone(target);
      if (target) {
        target.editable = true;
        this.tableData = newData;
      }
    },
    // 点击保存
    save(key) {
      let newData = [...this.tableData];
      let target = newData.filter((item,index) => key === index)[0];
      let verification = false;
      if(this.flag==1){
        verification = !target.hxcgjmc || !target.sl || !target.dw || !target.jscsjxhgg || !target.tbr
      }else if(this.flag==2){
        verification = !target.wlbm || !target.xpwlmc || !target.pp || !target.tjgf || !target.sl || !target.dw || !target.jscsjgg || !target.mbdj
      }else if(this.flag==3){
        verification = !target.wlbm || !target.wlmc || !target.gc || !target.sl || !target.dw || !target.tjrq || !target.qwdhrq || !target.jhdh || !target.xxgf || !target.djgfxx || !target.mbdj || !target.jhtbr
      }
      if(verification){
        this.$message.error('红色框为必填项！')
      }else{
        delete target.editable;
        this.tableData = newData;
        console.log(target)
      }
    },
    // 点击取消
    cancel(key) {
      let newData = [...this.tableData];
      let target = newData.filter((item,index) => key === index)[0];
      target = this.dataRowCopy;
      delete target.editable;
      this.tableData.splice(key,1,this.dataRowCopy)
    },
    // 点击提交
    handleAdd(obj) {
      this.tableData.push(obj)
      this.mergeCell(this.tableData,['materId'])
    },
    //删除
    handleDel(){
      let arr = this.tableData.filter(item=>{
        return item.checked
      })
      console.log(380,arr)
      if(!arr.length){
        this.$message.error('请至少选择一项！')
      }
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      console.log(selectedKeys)
      console.log(dataIndex)
      confirm();
      this.searchText = selectedKeys[0];
      this.searchedColumn = dataIndex;
    },
    handleReset(clearFilters) {
      clearFilters();
      this.searchText = '';
    },
  }
}
</script>

<style scoped lang="less">
  .table-wrapper{
    .red{
      border:1px solid red;
      border-radius: 4px;
    }
  }
  /deep/.ant-input-number-handler-wrap{
    display: none;
  }
  /deep/.anticon-paper-clip{
    display: none;
  }
  /deep/.ant-table-thead > tr > th{
    padding: 6px 16px;
    // height: 32px;
  }
  /deep/.ant-table-tbody > tr > td{
    padding: 2px 16px;
    text-align: left;
    // height: 32px;
    height: 36px;
    overflow: hidden;
    box-sizing: border-box;
  }
  /deep/.ant-upload-list-item-info{
    padding: 0 12px 0 0px;
  }
  
</style>